<template>
  <RelationSection title="基础信息">
    <RowWrapper>
      <RowAttribute :span="24" label="关系名称" required :label-width="labelWidth">
        <a-input placeholder="请输入关系名称" v-model="relation.relationName"/>
      </RowAttribute>
      <RowAttribute :span="24" label="状态" :label-width="labelWidth">
        <div style="display: flex; padding-top: 5px">
          <a-radio @click="() => relation.enable = true" :checked="relation.enable">启用</a-radio>
          <a-radio @click="() => relation.enable = false" :checked="!relation.enable">停用</a-radio>
        </div>
      </RowAttribute>

      <RowAttribute :span="24" label="调用源" required :label-width="labelWidth">
        <a-input :value="formDefinition.formName"/>
      </RowAttribute>

      <RowAttribute :span="24" label="关联单据" required :label-width="labelWidth">
        <FormRelationFormSelector
          :confirm-select="confirmSelectRelationForm"
          :formId.sync="relation.relationTargetFormId"
          :formName.sync="relation.relationTargetFormName"/>
      </RowAttribute>

      <RowAttribute :span="24" label="关联对象" required :label-width="labelWidth">
        <RelationObjectSelector :confirm-select="confirmSelectRelationObject"
                                v-model="relation.relationTargetInnerFormId" :relation="relation"
                                :formDefinition="relationTargetFormDefinition"/>
      </RowAttribute>
    </RowWrapper>
  </RelationSection>
</template>
<script>
import FormRelationFormSelector from '@comp/hhd/design/relation/FormRelationFormSelector/FormRelationFormSelector.vue';
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue';
import {createProps} from '@/utils';
import {createRelation} from '@comp/hhd/design/relation/types';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import RelationSection from '@comp/hhd/design/relation/RelationSection/RelationSection.vue';
import RelationObjectSelector from '@comp/hhd/design/relation/RelationObjectSelector/RelationObjectSelector.vue';
import RowWrapper from '@comp/hhd/layout/RowWrapper.vue';
export default {
  name: 'RelationBaseEditor',
  components: {RelationObjectSelector,RowWrapper, RelationSection, FormRelationFormSelector, RowAttribute},
  props: {
    labelWidth: createProps(String),
    relation: createProps(Object, createRelation),
    formDefinition: createProps(Object, createFormDefinition),
    relationTargetFormDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    confirmSelectRelationObject(callback) {
      if (!this.relation.relationTargetInnerFormId) {
        return callback(this.relation);
      }
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        title: '需要清空已有设置, 是否继续?',
        content: '关联信息已设置, 修改关联单据会清空已有设置, 是否继续?',
        onOk: () => {
          this.$emit('initConfigs');
          this.$nextTick(() => {
            callback(this.relation);
          });
        },
      });
    },
    confirmSelectRelationForm(callback) {
      if (!this.relation.relationTargetFormId) {
        return callback(this.relation);
      }
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        title: '需要清空已有设置, 是否继续?',
        content: '关联信息已设置, 修改关联单据会清空已有设置, 是否继续?',
        onOk: () => {
          this.$emit('initConfigs');
          this.$nextTick(() => {
            callback(this.relation);
          });
        },
      });
    },
  }
};
</script>